<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字游戏</title>
</head>
<body>
<script src="jquery.js"></script>
<button id="reset">重新开始一局游戏</button><br>
请输入你要猜的数字：<input type="text" id="number"><button id="guess">猜</button><br>
已经猜的次数：<span id="count"></span><br>
结果:<span id="result"></span>

<script>
    //随机生成一个数字
    var guessNumber=Math.floor(Math.random()*100)+1//表示随机出数字进行，范围1-100
    //唯二的交互值“猜”
    var count=0;
    $(function (){
        $("#guess").click(function (){
            count++;
            $("#count").text(count);
            var userNumber=$("#number").val();
            console.log(userNumber);
            console.log(guessNumber);
            if (userNumber>guessNumber){
                $("#result").text("猜大了");
                //进行css的颜色操作
                $("#result").css("color","red");
            }else if (userNumber<guessNumber){
                $("#result").text("猜小了");
                //进行css的颜色操作
                $("#result").css("color","red");
            }else {
                $("#result").text("猜对了,我是飘飘的爹");
                //进行css的颜色操作
                $("#result").css("color","green");
                $("#result").css("font-size","100px");
            }
        })
        $("#reset").click(function (){
            //重新生成一个新的数字
            guessNumber=Math.floor(Math.random()*100)+1;
            count=0;
            $("#count").text(count);
            $("#id").text("");
            $("#result").text("");
        })
    })
</script>
</body>
</html>